<!DOCTYPE html>
<html lang="en">

{include file="Public/head"}

<body data-type="widgets">
<script src="/assets/js/theme.js"></script>

<div class="am-g tpl-g">

    {include file='Public:header'}
    {include file='Public:menu2'}



    <!-- 内容区域 -->
    <div class="tpl-content-wrapper" >
        <div class="row-content am-cf">
            <div class="row">

                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title am-fl">新增</div>
                            <div class="widget-function am-fr">
                                <a href="javascript:;" class="am-icon-cog"></a>
                            </div>
                        </div>
                        <div class="panel-body" style="">
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#tab_tongyong" data-toggle="tab" aria-expanded="true">通用信息</a></li>
                                <li class=""><a href="#tab_goods_images" data-toggle="tab" aria-expanded="false">商品相册</a></li>
                                <li class=""><a href="#tab_goods_attr" data-toggle="tab" aria-expanded="false">商品属性</a></li>
                                <li class=""><a href="#tab_goods_spec" data-toggle="tab" aria-expanded="false">商品规格</a></li>


                            </ul>
                            <!--表单数据-->
                            <form action="{:Url('/Goods/addData2')}" method="post" id="addEditGoodsForm" style="">


                                <div class="tab-content" style="">
                                    <!--通用信息-->
                                    <div class="tab-pane active" id="tab_tongyong" style="">

                                        <table class="table table-bordered" style="">
                                            <tbody style="">
                                            <tr>
                                                <td>商品名称:</td>
                                                <td>
                                                    <input type="text" value="" name="goods_name" class="form-control" style="width:550px;">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>商品简介:</td>
                                                <td>
                                                    <textarea rows="3" cols="80" name="goods_remark"></textarea>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>商品货号</td>
                                                <td>
                                                    <input type="text" value="" name="goods_sn" class="form-control" style="width:350px;">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>SPU</td>
                                                <td>
                                                    <input type="text" value="" name="spu" class="form-control" style="width:350px;">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>SKU</td>
                                                <td>
                                                    <input type="text" value="" name="goods_sku" class="form-control" style="width:350px;">
                                                    <span id="sku" style="color:#F00; display:none;"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>商品分类:</td>
                                                <td>
                                                    <div class="col-xs-3">
                                                        <select name="cat_id" id="cat_id" onchange="get_category(this.value,'cat_id_2','0');" class="form-control" style="width:250px;margin-left:-15px;">
                                                            <option value="0">请选择商品分类</option>
                                                            {foreach name="classify" key="k" item="v"}
                                                            <option value="{$v.id}">{$v.name}</option>
                                                            {/foreach}
                                                        </select>
                                                    </div>
                                                    <div class="col-xs-3">
                                                        <select name="cat_id_2" id="cat_id_2" onchange="get_category(this.value,'cat_id_3','0');" class="form-control" style="width:250px;margin-left:-15px;">
                                                            <option value="0">请选择商品分类</option>
                                                        </select>
                                                    </div>
                                                </td>
                                            </tr>


                                            <tr>
                                                <td>商品品牌:</td>
                                                <td>
                                                    <select name="brand_id" id="brand_id" class="form-control" style="width:250px;">
                                                        <option value="">所有品牌</option>
                                                        {foreach name="brand" key="k" item="v"}
                                                        <option value="{$k}">{$v} </option>
                                                        {/foreach}
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>本店售价:</td>
                                                <td>
                                                    <input type="text" value="" name="shop_price" class="form-control" style="width:150px;" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')" onpaste="this.value=this.value.replace(/[^\d.]/g,'')">
                                                    <span id="err_shop_price" style="color:#F00; display:none;"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>市场价:</td>
                                                <td>
                                                    <input type="text" value="" name="market_price" class="form-control" style="width:150px;">
                                                    <span id="err_market_price" style="color:#F00; display:none;"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>成本价:</td>
                                                <td>
                                                    <input type="text" value="" name="cost_price" class="form-control" style="width:150px;">
                                                    <span id="err_cost_price" style="color:#F00; display:none"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>佣金:</td>
                                                <td>
                                                    <input type="text" value="" name="commission" class="form-control" style="width:150px;">
                                                    用于分销的分成金额
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>上传商品图片:</td>
                                                <td>
                                                    <input type="file" value="" name="image1" id="image1" onchange="img(this)"  accept="image/jpg,image/jpeg,image/png,image/PNG" class="form-control large" style="width:500px;margin-top:10px; "/>
                                                    <img src="" id="img2"style="width: 200px;height: 100px;text-align: center;display: none"/>
                                                    <span id="err_original_img" style="color:#F00; display:none;"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>商品重量:</td>
                                                <td>
                                                    <input type="text" class="form-control" style="width:150px;" value="" name="weight" >
                                                    &nbsp;克 (以克为单位)
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>是否包邮:</td>
                                                <td>
                                                    是:<input type="radio" value="1" name="is_free_shipping">
                                                    否:<input type="radio" checked="checked" value="0" name="is_free_shipping">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>库存数量:</td>
                                                <td>
                                                    <input type="text" value="" class="form-control" style="width:150px;" name="goods_store_count">
                                                    <span id="err_store_count" style="color:#F00; display:none;"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>赠送积分:</td>
                                                <td>
                                                    <input type="text" class="form-control" style="width:150px;" value="" name="give_integral">
                                                    <span id="err_give_integral" style="color:#F00; display:none;"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>兑换积分:</td>
                                                <td>
                                                    <input type="text" class="form-control" style="width:150px;" value="" name="exchange_integral" onkeyup="this.value=this.value.replace(/[^\d.]/g,'')" onpaste="this.value=this.value.replace(/[^\d.]/g,'')">
                                                    <span id="err_exchange_integral" style="color:#F00; display:none;"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>商品关键词:</td>
                                                <td>
                                                    <input type="text" class="form-control" style="width:550px;" value="" name="keywords">
                                                    <span id="err_keywords" style="color:#F00; display:none;"></span>
                                                </td>
                                            </tr>
                                            <tr style="">
                                                <td>商品详情描述:</td>
                                                <td width="85%" style="">
                                                   <textarea  class="container" name="container"  rows="5" id="container" title=""  ></textarea>
                                                    <span id="err_goods_content" style="color:#F00; display:none;"></span>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <!--通用信息-->

                                    <!-- 商品相册-->
                                    <div class="tab-pane " id="tab_goods_images">
                                        <table class="table table-bordered">
                                            <tbody>
                                            <tr>
                                                <td>
                                                    <div class="goods_xc" style="width:100px; text-align:center; margin: 5px; display:inline-block;">
                                                        <input type="hidden" name="goods_images[]" value="">
                                                            <div class="am-u-sm-8" >
                                                                <input type="file" value="" name="image" id="image" onchange="imgPreview(this)"  accept="image/jpg,image/jpeg,image/png,image/PNG" class="form-control large" style="width:500px;margin-top:10px; "/>
                                                                <img src="" id="img3"style="width: 200px;height: 100px;text-align: center;display: none"/>

                                                        <br>
                                                        <a href="javascript:void(0)">&nbsp;&nbsp;</a>
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <!--商品相册-->

                                    <!-- 商品属性-->
                                    <div class="tab-pane " id="tab_goods_attr">
                                        <table class="table table-bordered" id="goods_attr_table">
                                            <tbody><tr>
                                                <td>所选商品属性:</td>
                                                <td>

                                                    <select name="goods_type" id="goods_type" class="form-control" style="width:250px;">
                                                        <option value="0">选择商品属性</option>
                                                        {foreach $attr as $k=>$v}
                                                        <option value="{$v.id}">{$v.name}</option>
                                                        {/foreach}
                                                    </select>

                                                </td>
                                            </tr>
                                            <tr class="attr_321"><td> 属性名称</td> <td><input type="text" size="40" value="" name="brand_name"></td>
                                            </tr><tr class="attr_322"><td> 品牌</td> <td><input type="text" size="40" value="" name="brand"></td></tr>
                                           </tbody></table>
                                    </div>
                                    <!-- 商品属性-->

                                    <!--商品规格-->
                                    <div class="tab-pane " id="tab_goods_spec">
                                        <table class="table table-bordered" id="goods_spec_table">
                                            <tbody><tr>
                                                <td>商品类型:</td>
                                                <td>
                                                    <select name="spec_type" id="spec_type" class="form-control" style="width:250px;">
                                                        <option value="0">选择商品类型</option>
                                                        <option value="33">运营商</option><option value="32">相机</option><option value="4">手机</option><option value="31">电池、电源、充电器</option><option value="8">化妆品</option><option value="9">精品手机</option><option value="30">洗衣机</option><option value="29">冰箱</option><option value="16">路由器</option><option value="15">平板电脑</option><option value="13">衣服</option><option value="17">网络盒子</option><option value="18">电视</option><option value="19">家纺</option><option value="20">吸顶灯</option><option value="21">床</option><option value="22">雨伞</option><option value="23">餐具</option><option value="24">毛呢大衣</option><option value="25">针织衫</option><option value="26">文胸</option><option value="27">香水</option><option value="28">珠宝</option>
                                                    </select>
                                                </td>
                                            </tr>

                                            </tbody></table>
                                        <div id="ajax_spec_data"><table class="table table-bordered" id="goods_spec_table1">
                                            <tbody><tr>
                                                <td colspan="2"><b>商品规格:</b></td>
                                            </tr>
                                            <tr>
                                                <td>颜色:</td>
                                                <td>
                                                    <button type="button" data-spec_id="18" data-item_id="60" class="btn btn-default">
                                                        白色                </button>
                                                    <img width="35" height="35" src="/Public/images/add-button.jpg" id="item_img_60" onclick="GetUploadify3('60');">
                                                    <input type="hidden" name="item_img[60]" value="">
                                                    &nbsp;&nbsp;&nbsp;<button type="button" data-spec_id="18" data-item_id="61" class="btn btn-default">
                                                    黑色                </button>
                                                    <img width="35" height="35" src="/Public/images/add-button.jpg" id="item_img_61" onclick="GetUploadify3('61');">
                                                    <input type="hidden" name="item_img[61]" value="">
                                                    &nbsp;&nbsp;&nbsp;
                                                </td>
                                            </tr>
                                            </tbody></table>
                                            <div id="goods_spec_table2"><table class="table table-bordered" id="spec_input_tab"><tbody><tr><td><b>价格</b></td>
                                                <td><b>库存</b></td>
                                                <td><b>SKU</b></td>
                                            </tr></tbody></table></div>

                                            <script>

                                                // 上传规格图片
                                                function GetUploadify3(k){
                                                    cur_item_id = k; //当前规格图片id 声明成全局 供后面回调函数调用
                                                    GetUploadify(1,'','goods','call_back3');
                                                }


                                                // 上传规格图片成功回调函数
                                                function call_back3(fileurl_tmp){
                                                    $("#item_img_"+cur_item_id).attr('src',fileurl_tmp); //  修改图片的路径
                                                    $("input[name='item_img["+cur_item_id+"]']").val(fileurl_tmp); // 输入框保存一下 方便提交
                                                }

                                                // 按钮切换 class
                                                $("#ajax_spec_data button").click(function(){
                                                    if($(this).hasClass('btn-success'))
                                                    {
                                                        $(this).removeClass('btn-success');
                                                        $(this).addClass('btn-default');
                                                    }
                                                    else
                                                    {
                                                        $(this).removeClass('btn-default');
                                                        $(this).addClass('btn-success');
                                                    }
                                                    ajaxGetSpecInput();
                                                });


                                                /**
                                                 *  点击商品规格处罚 下面输入框显示
                                                 */
                                                function ajaxGetSpecInput()
                                                {
//	  var spec_arr = {1:[1,2]};// 用户选择的规格数组
//	  spec_arr[2] = [3,4];
                                                    var spec_arr = {};// 用户选择的规格数组
                                                    // 选中了哪些属性
                                                    $("#goods_spec_table1  button").each(function(){
                                                        if($(this).hasClass('btn-success'))
                                                        {
                                                            var spec_id = $(this).data('spec_id');
                                                            var item_id = $(this).data('item_id');
                                                            if(!spec_arr.hasOwnProperty(spec_id))
                                                                spec_arr[spec_id] = [];
                                                            spec_arr[spec_id].push(item_id);
                                                            //console.log(spec_arr);
                                                        }
                                                    });
                                                    ajaxGetSpecInput2(spec_arr); // 显示下面的输入框

                                                }


                                                /**
                                                 * 根据用户选择的不同规格选项
                                                 * 返回 不同的输入框选项
                                                 */
                                                function ajaxGetSpecInput2(spec_arr)
                                                {

                                                    var goods_id = $("input[name='goods_id']").val();
                                                    $.ajax({
                                                        type:'POST',
                                                        data:{'spec_arr':spec_arr},
                                                        url:"/index.php/admin/Goods/ajaxGetSpecInput/goods_id/"+goods_id,
                                                        success:function(data){
                                                            $("#goods_spec_table2").html('')
                                                            $("#goods_spec_table2").append(data);
                                                            hbdyg();  // 合并单元格
                                                        }
                                                    });
                                                }

                                                // 合并单元格
                                                function hbdyg() {
                                                    var tab = document.getElementById("spec_input_tab"); //要合并的tableID
                                                    var maxCol = 2, val, count, start;  //maxCol：合并单元格作用到多少列
                                                    if (tab != null) {
                                                        for (var col = maxCol - 1; col >= 0; col--) {
                                                            count = 1;
                                                            val = "";
                                                            for (var i = 0; i < tab.rows.length; i++) {
                                                                if (val == tab.rows[i].cells[col].innerHTML) {
                                                                    count++;
                                                                } else {
                                                                    if (count > 1) { //合并
                                                                        start = i - count;
                                                                        tab.rows[start].cells[col].rowSpan = count;
                                                                        for (var j = start + 1; j < i; j++) {
                                                                            tab.rows[j].cells[col].style.display = "none";
                                                                        }
                                                                        count = 1;
                                                                    }
                                                                    val = tab.rows[i].cells[col].innerHTML;
                                                                }
                                                            }
                                                            if (count > 1) { //合并，最后几行相同的情况下
                                                                start = i - count;
                                                                tab.rows[start].cells[col].rowSpan = count;
                                                                for (var j = start + 1; j < i; j++) {
                                                                    tab.rows[j].cells[col].style.display = "none";
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            </script></div>
                                    </div>
                                    <!--商品规格-->

                                </div>
                                <div class="pull-right">
                                    <input type="hidden" name="goods_id" value="">
                                    <button class="btn btn-primary" onclick="ajax_submit_form2('addEditGoodsForm','{:Url('/Admin/Goods/add')}');" title="" data-toggle="tooltip" type="button" data-original-title="保存">保存</button>
                                </div>
                            </form><!--表单数据-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

</body>
{include file='Public:script'}
<script>
    function imgPreview(fileDom) {
        //判断是否支持FileReader
        if(window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.files[0];
        var imageType = /^image\//;
        //是否是图片
        if(!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }
        //读取完成
        reader.onload = function(e) {
            //获取图片dom
            var img = document.getElementById("img3");
            console.log(img)
            //图片路径设置为读取的图片
            img.src = e.target.result;
            $("#img3").css("display", "block")
        };
        reader.readAsDataURL(file);
    }
    function img(fileDom) {
        //判断是否支持FileReader
        if(window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.files[0];
        var imageType = /^image\//;
        //是否是图片
        if(!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }
        //读取完成
        reader.onload = function(e) {
            //获取图片dom
            var img = document.getElementById("img2");
            console.log(img)
            //图片路径设置为读取的图片
            img.src = e.target.result;
            $("#img2").css("display", "block")
        };
        reader.readAsDataURL(file);
    }
$(function () {
    //点击切换不同的输入
    $('[data-toggle="tab"]').click(function () {
        // console.log($(this).attr('href'));
        $('[data-toggle="tab"]').parent().removeClass('active');//样式初始化
        $(this).parent().addClass('active');//选中改变样式
        $('[data-toggle="tab"]').attr('aria-expanded',false);//属性初始化
        $(this).attr('aria-expanded',true);//选中属性变true
        // $('[data-toggle="tab"]').
        $(".tab-pane").removeClass('active');//详情初始化
        $($(this).attr('href')).addClass('active');//选中打开详情
    })
});

    //提交
    function roleSubmit(){
        var form=document.getElementById("roleform");
        var formData=new FormData(form);
        $.ajax({
            url:"{:Url('addData')}",
            type:'POST',
            data:formData,
            async: false,
            cache: false,
            contentType: false, //不设置内容类型
            processData: false, //不处理数据
            success:function(res){
                console.log(res);
                if (res.code != 200) {
                    layer.msg(res.msg, {shade: 0.5, time: 2000,icon: 2});
                    return false;
                }
                layer.msg(res.msg, {shade: 0.5, time: 2000, icon: 1}, function(){
                    window.location.href=document.referrer;

                });
            }
        });
    }
</script>
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    //var ue = UE.getEditor('container');
    var ue = UE.getEditor('container', {
        autoHeightEnabled:false,
        initialFrameHeight:420
    });
</script>
<script src="/js/global.js"></script>
<script src="/js/myFormValidation.js"></script>
<script src="/js/myAjax.js"></script>
<script src="http://cdn.bootcss.com/amazeui/2.7.2/js/amazeui.min.js"></script>
<script src="/assets/js/amazeui.datatables.min.js"></script>
<script src="/assets/js/dataTables.responsive.min.js"></script>
</html>